<template>
    <div class="video-box">
        <swiper class="swiper" direction="vertical" @init="init"
            @slideChangeTransitionEnd="slideChangeTransitionEnd" @touchStart="touchstart"
            @touchMove="touchmove" @touchEnd="touchend" :threshold='20' @doubleClick="dbclick">
            <swiperSlide class="swiperSlide" v-for="(item,index) in video.list"
                :key="'video'+index">
                <!--  -->
                <video :src="condition=='production'?item:'/api'+item" :id="'video'+index" loop
                    webkit-playsinline playsinline x5-video-player-type="h5"
                    x5-video-player-fullscreen="true" x5-video-orientation="portraint"></video>
                <!-- <transition name="fade">
                    <div class="btn" @click="dbclick({realIndex:index})" v-show="current!==index">
                        <img src="../../assets/img/play.png" alt="">
                    </div>
                </transition> -->
            </swiperSlide>
        </swiper>
    </div>
</template>

<script setup>
// import Swiper core and required modules
// import { Pagination, Mousewheel } from 'swiper';
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';
// Import Swiper styles
import 'swiper/css';
// import 'swiper/css/navigation';
// import 'swiper/css/pagination';
// import 'swiper/css/scrollbar';
import { getCurrentInstance, onBeforeMount, onMounted, reactive, ref } from 'vue';
// import { debounce } from '../../tools/throttle'
// 轮播图组件
const init = (swiper) => {
    console.log(swiper.realIndex)
    setTimeout(() => {
        let currentVideo = document.getElementById('video0');
        currentVideo.play();
        currentVideo.muted = false;
    }, 1000)
};
const slideChangeTransitionEnd = (swiper) => {
    console.log(swiper.realIndex)
    if (swiper.realIndex >= 1) {
        let preVideo = document.getElementById('video' + (swiper.realIndex - 1));
        let currentVideo = document.getElementById('video' + swiper.realIndex);
        let nextVideo = document.getElementById('video' + (swiper.realIndex + 1));
        preVideo.pause();
        preVideo.currentTime = 0;
        nextVideo.pause();
        nextVideo.currentTime = 0;
        currentVideo.play();
        currentVideo.muted = false;
        return;
    }
    if (swiper.realIndex == 0) {
        let currentVideo = document.getElementById('video' + swiper.realIndex);
        let nextVideo = document.getElementById('video' + (swiper.realIndex + 1));
        nextVideo.pause();
        nextVideo.currentTime = 0;
        currentVideo.play();
        currentVideo.muted = false;
        return
    }

};

// 监控触摸方向 上下
let startX = undefined, startY = undefined, endX = undefined, endY = undefined, isStatus = false;
const touchstart = (swiper, e) => {
    startX = e.touches[0].pageX;
    startY = e.touches[0].pageY;
}
const touchmove = (swiper, e) => {
    isStatus = true;
    endX = e.touches[0].pageX;
    endY = e.touches[0].pageY;
}
const touchend = (swiper, e) => {
    let X = endX - startX,
        Y = endY - startY;
    // 判断是否移动还是点击
    if (isStatus) {
        if (Y > 20 && Math.abs(Y) > Math.abs(X)) {
            //向下
            // 刷新
            if (swiper.realIndex == 0) {
                video.list = [];
                getVideo();
                getVideo();
            }
        } else if (Y < -20 && Math.abs(Y) > Math.abs(X)) {
            //向上
            if ((swiper.realIndex + 1) == video.list.length - 1 || (swiper.realIndex + 1) == video.list.length) {
                getVideo();
            }
        }
    }
    isStatus = false;
}
let condition = process.env.NODE_ENV;
let video = reactive({
    list: []
});

let current = ref(0)
const dbclick = (swiper) => {
    let video = document.getElementById('video' + swiper.realIndex);
    if (!video.paused) {
        current.value = '';
        video.pause();
    } else {
        current.value = swiper.realIndex;
        video.play();
    }
}
// vue js
const { proxy } = getCurrentInstance()
// 获取video
const getVideo = () => {
    proxy.$http.get('/getVideoList').then((res) => {
        const result = res.data;
        if (result.code == 1) {
            video.list.push(result.data || '')
        }
    })
}
getVideo();
getVideo();

</script>

<style lang="less" scoped>
html {
    font-size: 80px;
}
.fade-enter-from,
.fade-leave-to {
    /*定义进入开始和离开结束的透明度为0*/
    opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
    /*定义进入结束和离开开始的透明度为1*/
    opacity: 1;
}

.fade-enter-active,
.fade-leave-active {
    /*定义进入和离开过渡状态的透明度变化的时间和变化曲线*/
    transition: opacity 0.5s ease;
}

.video-box {
    height: 100vh;
    .swiper {
        height: 100vh;
        .swiperSlide {
            position: relative;
            height: 100vh;

            .btn {
                width: 70px;
                height: 70px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                img {
                    object-fit: cover;
                    width: 100%;
                    height: 100%;
                }
            }
        }
        video {
            background: black;
            height: 100vh;
            width: 100%;
            object-position: center center;
        }
    }
}
</style>